<template>
  <div>
    <Card dis-hover style="border-bottom:0">
      <p slot="title">
        基本信息
      </p>
      <table class="mytable" style="text-align:center;width: 60%; ">
        <tbody>
          <tr>
            <td>商户ID</td>
            <td class="leftT">{{this.userInfo.uid}}</td>
            <td>商户名称</td>
            <td class="leftT">{{this.userInfo.nickname}}</td>
          </tr>
          <tr>
            <td>商户状态</td>
            <td class="leftT">{{this.userInfo.status | format}}</td>
            <td>代理商ID</td>
            <td class="leftT">{{this.userInfo.agent_uid}}</td>
          </tr>
          <tr>
            <td>账户名称</td>
            <td class="leftT">{{this.userInfo.account}}</td>
            <td>真实姓名</td>
            <td class="leftT">{{this.userInfo.real_name}}</td>
          </tr>
          <tr>
            <td>身份证号</td>
            <td class="leftT">{{this.userInfo.card_id}}</td>
            <td>手机号</td>
            <td class="leftT">{{this.userInfo.phone}}</td>
          </tr>
        </tbody>
        <!-- <tbody>
          <tr v-for="(item,index) in basicData" :key="index">
            <td>{{item.title}}</td>
            <td class="leftT">{{item.content}}</td>
            <td>{{item.title1}}</td>
            <td class="leftT">{{item.content1}}</td>
          </tr>
        </tbody> -->
        <!-- <br>
        <tbody>
          <tr v-for="(item,index) in userData" :key="index">
            <td>{{item.title}}</td>
            <td class="leftT">{{item.content}}</td>
            <td>{{item.title1}}</td>
            <td class="leftT">{{item.content1}}</td>
          </tr>
        </tbody> -->
      </table>

    </Card>
    <Card dis-hover show style="border-top:0">
      <p slot="title">账户信息</p>
      <table class="mytable" style="text-align:center">
        <tbody>
          <tr>
            <td>账户余额(元)</td>
            <td>{{this.userInfo.now_money}}</td>
            <td>待结算佣金金额(元)</td>
            <td>{{this.userInfo.un_money}}</td>
          </tr>
          <tr>
            <td>可结算金额(元)</td>
            <td>{{this.userInfo.settlable_money}}</td>
          </tr>
          <tr>
            <td>保证金(元)</td>
            <td>{{this.userInfo.earnest_money}}</td>
            <td>冻结余额(元)</td>
            <td>{{this.userInfo.frozen_money}}</td>
          </tr>
          <tr>
            <td>代付金额(元)</td>
            <td>{{this.userInfo.paid_money}}</td>
            <td>不可用代付余额(元)</td>
            <td>{{this.userInfo.un_paid_money}}</td>
          </tr>
        </tbody>
      </table>
    </Card>

  </div>
</template>

<script>
  const data1 = [{
      title: '商户ID',
      content: '测试'
    },
    {
      title: '商户状态',
      content: '使用中'
    }, {
      title: '上级代理商ID',
      content: '2'
    }, {
      title: '用户名',
      content: ''
    },
    {
      title: '真实姓名',
      content: ''
    }, {
      title: '身份证号',
      content: ''
    }, {
      title: '手机号',
      content: ''
    },
    {
      title: 'QQ',
      content: ''
    }, {
      title: '邮箱',
      content: ''
    },
    {
      title: '网站名称',
      content: ''
    },
    {
      title: '网站地址',
      content: ''
    }, {
      title: '通讯地址',
      content: ''
    }, {
      title: '唯一标记',
      content: ''
    }

  ];
  const data2 = [{
    title: '开户行名称',
    content: '中国银行'
  }, {
    title: '开户网点名称',
    content: ''
  }, {
    title: '开户所在省',
    content: ''
  }, {
    title: '开户所在市',
    content: ''
  }, {
    title: '账户名',
    content: ''
  }, {
    title: '账户号',
    content: ''
  }, {
    title: '结算类型',
    content: ''
  }, {
    title: '手续费',
    content: ''
  }, {
    title: '提现开始时间',
    content: ''
  }, {
    title: '提现结束时间',
    content: ''
  }, {
    title: '账户名',
    content: ''
  }, {
    title: '账户名',
    content: ''
  },
  ];
  const data3 = [{
    title: '账户余额(元)',
    content: '0'
  }, {
    title: '不可用余额(元)',
    content: ''
  }, {
    title: '可结算金额(元)',
    content: ''
  }];
  export default {
    name: 'basic-news',
    data() {
      return {
        userInfo: {},
        basicData: [],
        accountData: [],
        userData: [],
      }
    },
    filters:{
      format(value){
        return value == 0 ?'启用':'停止';
      }

    },
    mounted() {
      this.userInfo = this.$store.state.user.userInfo
      console.log(this.userInfo)
      // 处理基本信息数据
      for (let i = 0; i < data1.length; i++) {
        if (i % 2 != 0 && i != 0) {
          let newData = {
            title1: '',
            content1: ''
          }
          for (let key in data1[i]) {
            if (key === "title") {
              newData.title1 = data1[i][key]
            } else {
              newData.content1 = data1[i][key]
            }
          }
          this.basicData.push(Object.assign(data1[i - 1], newData))
        }

      }
      console.log(this.basicData)
      // 处理开户数据
      for (let i = 0; i < data2.length; i++) {
        if (i % 2 != 0 && i != 0) {
          let newData = {
            title1: '',
            content1: ''
          }
          for (let key in data2[i]) {
            if (key === "title") {
              newData.title1 = data2[i][key]
            } else {
              newData.content1 = data2[i][key]
            }
          }
          this.userData.push(Object.assign(data2[i - 1], newData))
        }
      }
    }

  }
</script>

<style>
  .ivu-card-head {
    position: relative;
  }

  .ivu-card-head::after {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 70px;
    border-bottom: 2px solid #5FB878;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .mytable {
    width: 100%;
    background-color: #fff;
    color: #666;
    margin: 10px 0;
    text-align: center;
  }

  .mytable tr {
    transition: all .3s;
    -webkit-transition: all .3s;
  }

  .mytable td {
    position: relative;
    padding: 9px 15px;
    min-height: 20px;
    line-height: 20px;
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    border-color: #e6e6e6;
    margin: 0;
  }

  .mytable tbody tr:hover {
    background-color: #f2f2f2;
  }

  /* .bg-color:nth-child(odd){
    background-color: #9EA7B4;
  } */
</style>
